<template>
  <!-- 添加或修改案件信息对话框 -->
  <el-dialog :title="'案件下派'" :visible.sync="open" width="800px" @close="cancel" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="110px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="案件等级" prop="evtLevel">
            <el-select v-model="form.evtLevel" placeholder="请选择案等级" ref="evtLevel">
              <el-option
                v-for="dict in evtLevelOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="案件类型" prop="evtType">
            <el-select v-model="form.evtType" placeholder="请选择案件类型">
              <el-option
                v-for="dict in evtTypeOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="案件来源" prop="evtSource">
            <el-select v-model="form.evtSource" disabled placeholder="请选择案件来源" ref="evtSource">
              <el-option
                v-for="dict in evtSourceOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="案件时间" prop="evtDate">
            <el-date-picker clearable size="small"
                            v-model="form.evtDate"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择案件时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="案件地点" prop="evtAddress">
            <el-input v-model="form.evtAddress" type="textarea" placeholder="请输入内容"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="案件内容">
            <el-input v-model="form.evtContent" type="textarea" placeholder="请输入内容"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="违法、违规信息" prop="violation" label-width="110px">
            <treeselect v-model="form.violation" :options="violationOptions" :show-count="true"
                        placeholder="请选择违法、违规信息" style="width:270px;"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="管辖区" prop="areaName">
            <el-select v-model="form.areaName" placeholder="请选择管辖区">
              <el-option
                v-for="dict in areaNameOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="X坐标" prop="x">
            <el-input v-model="form.x" placeholder="请输入X坐标" :disabled="true"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Y坐标" prop="y">
            <el-input v-model="form.y" placeholder="请输入Y坐标" :disabled="true"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="举报人ID" prop="reporterObjectId">
            <el-input v-model="form.reporterObjectId" placeholder="请输入举报人ID" :disabled="true"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="举报人" prop="reporterObjectName">
            <el-input v-model="form.reporterObjectName" placeholder="请输入举报人" :disabled="true"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="举报时间" prop="reporterTime">
            <el-date-picker clearable size="small"
                            v-model="form.reporterTime"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择举报时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12"></el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {alarmAddEvtInfo} from '@/api/frontierEvent/event'
  import Editor from '@/components/Editor'
  import {treeselect} from '@/api/basicInformation/violationType'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
    name: 'eventRun',
    components: {
      Editor,
      Treeselect
    },
    props: {
      open: {
        type: Boolean,
        default: false
      },
      basicInfo: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    watch: {
      basicInfo: {
        handler(val) {
          console.log('basicInfo===>', this.basicInfo)
          this.form.x = this.basicInfo.x
          this.form.y = this.basicInfo.y
          this.form.evtSource = this.basicInfo.evtSource || '5'
          this.form.alarmId = this.basicInfo.alarmId
          this.form.reporterObjectId = this.basicInfo.receiveObjectId
          this.form.receiveObjectId = this.basicInfo.receiveObjectId
          this.form.reporterObjectName = this.basicInfo.reporterObjectName
        }
      }
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 案件信息表格数据
        eventList: [],
        // 弹出层标题
        title: '',
        // 案件类型字典
        evtTypeOptions: [],
        // 案件来源字典
        evtSourceOptions: [],
        // 案件状态字典
        evtStateOptions: [],
        // 违法、违规信息字典
        violationOptions: [],
        // 管辖区字典
        areaNameOptions: [],
        // 案件等级字典
        evtLevelOptions: [],
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          evtSource: [
            {required: true, message: '案件来源不能为空', trigger: 'change'}
          ],
          evtState: [
            {required: true, message: '案件状态不能为空', trigger: 'change'}
          ]
        }
      }
    },
    created() {
      this.getTreeselect()
      this.getDicts('evt_type').then(response => {
        this.evtTypeOptions = response.data
      })
      this.getDicts('evt_source').then(response => {
        this.evtSourceOptions = response.data
      })
      this.getDicts('evt_state').then(response => {
        this.evtStateOptions = response.data
      })
      this.getDicts('evt_area').then(response => {
        this.areaNameOptions = response.data
      })
      this.getDicts('evt_level').then(response => {
        this.evtLevelOptions = response.data
      })
    },
    methods: {
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          evtLevel: undefined,
          evtType: undefined,
          evtSource: undefined,
          evtDate: undefined,
          evtAddress: undefined,
          evtContent: undefined,
          evtState: undefined,
          violation: undefined,
          areaName: undefined,
          x: undefined,
          y: undefined,
          reporterObjectId: undefined,
          reporterObjectName: undefined,
          reporterTime: undefined,
          delFlag: undefined,
          createById: undefined,
          createBy: undefined,
          createTime: undefined,
          updateById: undefined,
          updateBy: undefined,
          updateTime: undefined,
          alarmId: undefined,
          evtSource: undefined
        }
        this.resetForm('form')
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.form.updateType = 2
            alarmAddEvtInfo(this.form).then(response => {
              this.msgSuccess('新增成功')
              this.closedAll()
            })
          }
        })
      },
      closedAll() {
        this.reset()
        this.open = false
        this.$emit('closedAll')
      },
      cancel() {
        this.reset()
        this.open = false
        this.$emit('closed')
      },
      getTreeselect() {
        treeselect().then(response => {
          this.violationOptions = response.data
        })
      },
    },
  }
</script>

<style lang="scss" scoped>

  ::v-deep .el-form-item .el-select .el-input,.el-form-item .el-date-editor.el-input {
    width: 270px !important;
  }
</style>
